<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="button" type="primary" @click="addUser" v-if="scene==0"
          >添加就诊人</el-button
        >
      </div>
    </template>
    <div class="comtend" v-if="scene == 0">
      <person
        class="item"
        v-for="(item, index) in HaspitalUser"
        :key="item.id"
        :user="item"
        :index="index"
        :isShow="true"
        @changeScene="changeScene"
        @DeleteUser="DeleteUser"
      ></person>
    </div>
    <div class="form" v-else>
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名">
          <el-input
            placeholder="请输入用户姓名"
            v-model="UserInfo.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select
            placeholder="请选择证件类型"
            style="width: 100%"
            v-model="UserInfo.certificatesType"
          >
            <el-option
              :label="item.name"
              :value="item.value"
              v-for="item in CertType"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input
            placeholder="请输入证件号码"
            v-model="UserInfo.certificatesNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="UserInfo.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            type="date"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
            v-model="UserInfo.birthdate"
          />
        </el-form-item>
      </el-form>
      <el-divider content-position="left"
        >建档信息（完善部分后医院首次就诊不排队建档）</el-divider
      >
      <el-form style="width: 60%; margin: 10px auto">
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="UserInfo.isMarry">
            <el-radio :label="1">已婚</el-radio>
            <el-radio :label="0">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group v-model="UserInfo.isInsure">
            <el-radio :label="1">自费</el-radio>
            <el-radio :label="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址">
          <el-cascader :props="props" v-model="UserInfo.addressSelected" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            placeholder="请输入详细地址"
            v-model="UserInfo.address"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">紧急联系人信息(选填)</el-divider>
      <el-form style="width: 60%; margin: 10px auto" label-width="80px">
        <el-form-item label="用户姓名">
          <el-input
            placeholder="请输入用户姓名"
            v-model="UserInfo.contactsName"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select
            placeholder="请选择证件类型"
            style="width: 100%"
            v-model="UserInfo.contactsCertificatesType"
          >
            <el-option
              :label="item.name"
              :value="item.value"
              v-for="item in CertType"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input
            placeholder="请输入证件号码"
            v-model="UserInfo.contactsCertificatesNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            placeholder="请输入手机号码"
            v-model="UserInfo.contactsPhone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="gosubmit">提交</el-button>
          <el-button type="danger" @click="reset">重写</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive,watch } from "vue";
import { reqHospitalUser } from "@/api/hospital";
//引入接口
import { reqGetCertType, reqGetArea, reqAddOrUpdatePatient } from "@/api/User";
//引入接口类型
import {
  CertificatesTypeAll,
  CertificatesTypeArray,
  AddOrUpdateUserParams,
} from "@/api/User/type";
import { ElMessage } from "element-plus";
//引入路由
import {useRouter,useRoute} from 'vue-router'
//创建路由
let $router = useRouter();
let $route = useRoute();
//存储就诊人管理
let HaspitalUser = ref<any>([]);
//定义自定义熟悉控制组件切换
let scene = ref<number>(0);
//存储证件信息
let CertType = ref<CertificatesTypeArray>([]);
//存储用户信息
let UserInfo = reactive<AddOrUpdateUserParams>({
  name: "",
  certificatesType: "",
  certificatesNo: "",
  sex: 0,
  birthdate: "",
  phone: "",
  isMarry: 0,
  isInsure: 0,
  address: "",
  addressSelected: [],
  contactsName: "",
  contactsPhone: "",
  contactsCertificatesType: "",
  contactsCertificatesNo: "",
});
//挂载时调用获取用户信息
onMounted(() => {
  HasUserInfo();
  GetCardType();
  //进行判断，看路由是否携带参数
  if($route.query.type=='add') {
    //改变场景值
    scene.value = 1;
  }else if($route.query.type=='edit') {
    //切换场景
    scene.value = 1
  }
});
//监视就诊人数组
watch(()=>HaspitalUser.value,()=>{
  if($route.query.type == 'edit'){
    //查找id一样的就诊人
    let user = HaspitalUser.value.find((item:any)=>item.id==$route.query.id)
    //合并数据
    Object.assign(UserInfo,user)
    
  }
})
//获取用户信息回调
const HasUserInfo = async () => {
  let result = await reqHospitalUser();
  if (result.code == 200) {
    HaspitalUser.value = result.data;
  }
};
//添加就诊人的回调
const addUser = () => {
  //重置数据
  reset();
  scene.value = 1;

};
//获取证件类型
const GetCardType = async () => {
  let result: CertificatesTypeAll = await reqGetCertType("CertificatesType");
  CertType.value = result.data;
};
//重写方法
const reset = ()=>{
    //覆盖上次的数据
    Object.assign(UserInfo, {
      id:null,
    name: "",
    certificatesType: "",
    certificatesNo: "",
    sex: 0,
    birthdate: "",
    phone: "",
    isMarry: 0,
    isInsure: 0,
    address: "",
    addressSelected: [],
    contactsName: "",
    contactsPhone: "",
    contactsCertificatesType: "",
    contactsCertificatesNo: "",
  });
}
//自定义事件
const changeScene = (state: number,user:AddOrUpdateUserParams) => {
  scene.value = state;
  Object.assign(UserInfo, user);
};
const DeleteUser = ()=>{
  //获取就诊人数据
  HasUserInfo();
}
//地址数据
const props = {
  lazy: true,
  async lazyLoad(node: any, resolve: any) {
    let result = await reqGetArea(node.data.id || "86");
    let Showdata = result.data.map((item: any) => {
      return {
        id: item.id,
        label: item.name,
        value: item.value,
        leaf: !item.hasChildren,
      };
    });
    resolve(Showdata);
  },
};
//提交按钮的回调
const gosubmit = async () => {
  try {
    let result = await reqAddOrUpdatePatient(UserInfo);
    if (result.code == 200) {
      ElMessage({
        type: "success",
        message: UserInfo.id ? "修改成功" : "新增成功",
      });
      //判断路由参数是否携带add
      if($route.query.type) {
        //返回原来的路由
        $router.back();
      }else {
        scene.value = 0;
      }
    
      //再次获取信息
      HasUserInfo();
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: UserInfo.id ? "修改失败" : "新增失败",
    });
  }
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comtend {
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 32%;
    margin: 5px;
  }
}
</style>
